<template>
  <div class="els-button-group">
    <template v-for="(el,ins) in elems">
      <template v-if="el.type === 'delimiter'">
        <slot name="delimiter">
          <i v-if="el.text" :key="ins" class="g--delimiter">{{ el.text }}</i>
          <el-divider v-if="el.divider" :key="ins" direction="vertical" class="g--divider g--delimiter"></el-divider>
        </slot>
      </template>
      <el-button v-else class="g--item" :key="ins" v-bind="el.props" @click.stop="el.handle"> {{ el.text || '' }} </el-button>
    </template>
  </div>
</template>


<script>
export default {
  name: "els-button-group",
  props: {
    column: {type:Array,default:() => []}, // buttons 按钮属性集合
    type: { type: String, default: "text" }, // 按钮组统一类型，优先级低于 column 
    attrs:{type:Object,default:() => ({})},// 通用属性 ，优先级低于 type,column
    delimiter: [String,Object,Boolean],
    permissions: [Array,Object], // [k1,k2,k3] | {k1:true,k2:true,k3:true,k4:false}
    permissionKey:{type:String,default:'key'}
  },
  data: () => ({}),
  computed: {
    permission(){
      const p = this.permissions || []
      const isArr = Array.isArray(p)
      let r = []
      if(!isArr){
        const keys = Object.keys(p);
        keys.forEach(k => {
          if(p[k]){
            r.push(k)
          }
        })
      }else{
        r = [...p]
      }
      return r;
    },
    buttons(){
      const type = this.type;
      const isPermisson = this.permissions !== undefined;
      const p = this.permission
      const pk = this.permissionKey
      const attrs = this.attrs || {}
      // 权限过滤
      const cols = this.column.filter(col => {
        if(!isPermisson){
          return true;
        }
        const k = col[pk]
        return p.indexOf(k) !== -1
      });
      const btns = cols.map(col => ({
        props:{...attrs,type,...this.utilGetColProp(col)},
        text:col.text,
        handle:col.handle || (() => {})
      }))
      console.log(this.column)
      console.log(cols)
      console.log(btns)
      return btns;
    },
    limiter(){
      const o = this.delimiter || undefined;
      if(o === undefined){
        return undefined;
      }
      const t = typeof o;
      let d = {type:'delimiter'}
      switch(t){
        case 'string':
          d = {...d,text:o}
          break;
        case 'object':
          d = {...d,...o}
          break;
        case 'boolean':
          d = {...d,slot:true}
          break;
        default:
          d = {...d,text:'|'}
      }
      return d;
    },
    elems(){
      const temp = this.limiter
      const btns = this.buttons;
      let list = [...btns]
      if(temp && btns.length > 1){
        list = [];
        for(let i = 0,l = btns.length; i < l; i++){
          const b = btns[i]
          list.push(b)
          if(i < l - 1){
            list.push(temp)
          }
        }
      }
      return list;
    },
  },
  methods:{
    utilGetColProp(col = {}){
      const extKeys = ['text','handle']
      const keys = Object.keys(col)
      let r = {}
      keys.forEach(k => {
        if(extKeys.indexOf(k) === -1){
          r[k] = col[k]
        }
      })
      return r;
    }
  }
};
</script>

<style scoped lang="scss">
</style>